<template>
  <div class="large-screen-home-right">
    <div class="right-top">
      <!-- 右上角标题 -->
      <span class="right-top-title">产线预览图</span>
      <div class="right-top-content">
        <a-image
          width="100%"
          style="object-fit: fill; transform: scale(1.15)"
          :src="Line"
        />
      </div>
    </div>
    <div class="right-bottom">
      <span class="right-bottom-title">设备异常报警记录</span>
      <div class="right-bottom-content">
        <Table :columns="columns" :tableData="tableData" :height="350" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
// import { getAlarmsList } from "@/api/large-screen";
import { Polling } from "@/utils/polling";
import Line from "@/assets/images/large-screen/home/line.png";
import Table from "../table.vue";

const columns = ref([
  { title: "设备编号", dataIndex: "equipmentNumber" },
  { title: "实验间", dataIndex: "equipmentName" },
  { title: "异常类型", dataIndex: "content" },
  { title: "时间", dataIndex: "createTime" },
]);

const tableData = ref([]);

const getAlarms = async () => {
  try {
    // const res = await getAlarmsList();
    // tableData.value = res || [];
    tableData.value = new Array(30).fill().map((_, index) => ({
      id: index + 1,
      equipmentNumber: Math.random().toString(36).substring(2),
      equipmentName: `实验间${index + 1}`,
      content: `异常类型${index + 1}`,
      createTime: `2023-01-01 ${index < 9 ? `0${index + 1}` : index + 1}:00:00`,
    }));
  } catch (error) {
    console.error("获取报警记录失败:", error);
  }
};

// 轮询
const polling = new Polling(getAlarms, 15000);

onMounted(() => {
  getAlarms();
  polling.start();
});

// 销毁
onBeforeUnmount(() => {
  polling.stop();
});
</script>

<style lang="scss" scoped>
/** 右侧 */
.large-screen-home-right {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  // padding: 20px 30px 20px 20px;

  .right-top,
  .right-bottom {
    position: relative;
    width: 100%;
    height: 455px;
  }
  .right-top {
    background: url("@/assets/images/large-screen/home/bg3.png") no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }

  .right-top-content {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 400px;
    padding: 20px;
    color: #fff;
  }
  .right-bottom {
    margin-top: 20px;
    background: url("@/assets/images/large-screen/home/bg4.png") no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  /** 标题 */
  .right-top-title,
  .right-bottom-title {
    position: relative;
    display: block;
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 0 70px;
    line-height: 56px;
  }
  .right-bottom-title {
    line-height: 48px;
  }
  .right-bottom-content {
    padding: 20px;
  }
}
</style>
